import { Flex, Typography } from "antd";
import { formatNumberToWan } from "../Common/commonData";
import styles from "./DyCard.module.css";
import { useUser } from "@/hook/useUser/useUser";
import ProxyImage from "../Common/ProxyImage/ProxyImage";
const { Text, Title } = Typography;

export function DyCard({ item = {}, style = {} }) {
  const { openInNewWindow, listDisplay } = useUser();
  const target = openInNewWindow ? "_blank" : "_self";
  const isImageEnabled = listDisplay === 0 ? true : false;
  return (
    <Flex
      style={{
        backgroundColor: "white",
        borderRadius: 8,
        boxShadow:
          "rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px",
        overflow: "hidden",
        transition: "transform 0.2s, box-shadow 0.2s",
        "&:hover": {
          transform: "translateY(-2px)",
          boxShadow:
            "rgba(0, 0, 0, 0.15) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -2px",
        },
        ...style,
      }}
      gap={16}
      align="flex-start">
      {/* 序号 */}
      <Flex
        justify="center"
        align="center"
        className={`${styles.order} ${styles[`order-${item.order}`]}`}>
        {item.order}
      </Flex>

      {/* 主要内容 */}
      <Flex flex={1} style={{ padding: "12px 12px 12px 0" }} gap={16}>
        {/* 图片 */}
        {isImageEnabled && (
          <a
            href={item.url}
            target={target}
            style={{ display: "block", flexShrink: 0 }}>
            <ProxyImage
              originalUrl={item.extra_content?.photo_url || null}
              style={{
                width: "175px",
                height: "99px",
                objectFit: "cover",
                borderRadius: ".25rem",
              }}
            />
          </a>
        )}
        {/* 文本内容 */}
        <Flex vertical flex={1} gap={8} justify="space-between">
          {/* 标题和标签 */}
          <Flex gap={8} align="center" wrap="wrap">
            <a
              href={item.url}
              target={target}
              className={styles["title-link"]}
              style={{ textDecoration: "none" }}>
              <Title
                className={styles.title}
                level={5}
                style={{
                  margin: 0,
                  color: "#222",
                  "&:hover": {
                    color: "#1890ff",
                  },
                }}
                ellipsis={{ rows: 1 }}>
                {item.title}
              </Title>
            </a>
            {item.extra_content.label && (
              <Typography.Paragraph
                className={`${styles.label} ${
                  styles[item.extra_content.label]
                }`}>
                {item.extra_content.label}
              </Typography.Paragraph>
            )}
          </Flex>

          {/* 热度 */}
          <Flex vertical align="start" justify="center">
            <Text strong style={{ color: "#ff4d4f", fontSize: 16 }}>
              {formatNumberToWan(item.extra_content.hot)}
              <Text type="secondary" style={{ fontSize: 16, width: "5rem" }}>
                热度
              </Text>
            </Text>
          </Flex>
        </Flex>
      </Flex>
    </Flex>
  );
}
